import React, { useState, memo } from 'react';
import { Button, Dropdown } from 'antd';
import { useSelections } from '@umijs/hooks';
import flowMenu from './FlowMenu';
import useFlowModel from '../../useModels/useFlowModel.js';
//打开流程菜单的容器按钮
const FlowMenuBox = memo(({ item }) => {
  const { flowList, executeProcess, deviceContext, associatedProcess } = useFlowModel(model => [
    model.flowList,
  ]);

  const [visible, setVisible] = useState(false);

  const selectionsProps = useSelections(
    flowList.map(app => {
      return app.id;
    }),
    [],
  );

  const save = params => {
    deviceContext({ suIndex: item.id, ...params });
  };
  const executeProcessFn = async params => {
    return await executeProcess({ suIndex: item.id, ...params });
  };
  return (
    <Dropdown
      onVisibleChange={async visible => {
        let res = visible && (await associatedProcess({ suIndex: item.id }));
        if (res.result) {
          selectionsProps.setSelected(res.data || []);
        }
        setVisible(visible);
      }}
      visible={visible}
      overlay={flowMenu({ flowList, setVisible, selectionsProps, executeProcessFn, save })}
      trigger={'click'}
    >
      <Button>流程</Button>
    </Dropdown>
  );
});

export default FlowMenuBox;
